<template>
  <div>
    <a-drawer
        title="详细信息"
        placement="right"
        :closable="true"
        :visible="visible"
        :width="600"
        :body-style="{ paddingBottom: '80px' }"
        @close="onClose"
    >
      <template>
        <a-descriptions layout="vertical" bordered>
          <a-descriptions-item label="用户名">
            {{ record.loginName }}
          </a-descriptions-item>
          <a-descriptions-item label="昵称">
            {{ record.userName }}
          </a-descriptions-item>
          <a-descriptions-item label="用户状态">
            {{ stateMap[record.userState] }}
          </a-descriptions-item>
          <a-descriptions-item label="信誉积分">
            {{ record.score }}
          </a-descriptions-item>
          <a-descriptions-item label="手机号">
            {{ record.userPhone }}
          </a-descriptions-item>
          <a-descriptions-item label="身份证号">
            {{ record.idCard }}
          </a-descriptions-item>
          <a-descriptions-item label="租借卡号">
            {{ record.cardId }}
          </a-descriptions-item>
          <a-descriptions-item label="注册时间">
            {{ record.gmtCreate }}
          </a-descriptions-item>
        </a-descriptions>
      </template>
    </a-drawer>
  </div>
</template>
<script>
export default {
  props: {},
  data () {
    return {
      record: {},
      visible: false,
      stateMap: ['使用中', '停用', '注销'],
    }
  },
  methods: {
    show (record) {
      this.visible = true
      this.record = record
    },
    onClose () {
      this.visible = false
    }
  }
}
</script>
